<template>
  <div class="page-container">
    <div class="page-header">
      <div class="logo">
        <img src="../assets/imgs/login_icon.png" alt="" />
        受众分析
      </div>
      <ul>
        <li
          v-for="(item, index) in nav"
          :key="index"
          :class="indexTabIndex == index ? 'active' : ''"
          @click.capture="navLink(item, index)"
        >
          <span v-if="item.namePath">{{ item.tit }}</span>
          <select-down
            class="sel-down"
            v-else
            @handleChange="navLink"
            :selectData="item.children"
            :index="index"
          ></select-down>
        </li>
      </ul>
      <div class="user" @click.stop="logOutShow = !logOutShow">
        <i class="el-icon-user-solid"></i>
        <span>
          {{userName}}
        </span>
        <i :class="logOutShow?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
        <transition name="el-fade-in-linear">
          <span v-show="logOutShow" class="logOut" @click="logOut">退出登录</span>
        </transition>
      </div>
    </div>
    <div class="page-content">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-else></router-view>
    </div>
  </div>
</template>

<script>
import { Login, InsertUser } from "@/api/login";
import { clearCookie } from "@/utils/index";
export default {
  name: "layout",
  data() {
    return {
      logOutShow:false,
      userName:'',
      indexTabIndex: 0,
      nav: [
        {
          tit: "首页",
          namePath: "index",
        },
        {
          tit: "人物档案库",
          namePath: "personal",
        },
        {
          tit: "机构档案库",
          namePath: "organization",
        },
        {
          tit: "推特档案库",
          namePath: "twitter",
        },
        {
          tit: "主题档案库",
          namePath: "themes",
        },
        {
          tit: "档案管理",
          children: {
            checked: {
              tit: "档案管理",
              namePath: "managearchives",
            },
            option: [
              {
                tit: "我的档案",
                namePath: "managearchives",
              },
              {
                tit: "关注的档案",
                namePath: "attentionmanagear",
              },
              {
                tit: "创建档案",
                namePath: "createmanagearchives",
              },
            ],
          },
        },
        {
          tit: "主题管理",
          children: {
            checked: {
              tit: "主题管理",
              namePath:"mytheme"
            },
            option: [
              {
                tit: "我的主题",
                namePath: "mytheme",
              },
              {
                tit: "关注的主题",
                namePath: "concerntheme",
              },
              {
                tit: "创建主题",
                namePath: "createtheme",
              },
            ],
          },
        },
        // {
        //   tit: "用户管理",
        //   namePath: "manageuser",
        // },
      ],
    };
  },

  created() {
    this.indexTabIndex = Number(sessionStorage.getItem("indexTabIndex"))
      ? Number(sessionStorage.getItem("indexTabIndex"))
      : 0;
    if(this.$store.getters.userInfo){
      this.userName = this.$store.getters.userInfo.name
    }
  },
  mounted(){
    document.addEventListener('click',()=>{
      this.logOutShow = false
    })
  },
  updated() {
    this.indexTabIndex = Number(sessionStorage.getItem("indexTabIndex"));
    // Login({
    //   username:'test',
    //   password:'test'
    // })
  },
  methods: {
    navLink(item, index) {
      this.$store.commit("setIndexTabIndex", index);
      window.sessionStorage.setItem("indexTabIndex", index);
      if (item.namePath) {
        this.$router.push({
          name: item.namePath,
        });
      }
    },
    logOut(){
      clearCookie('JSESSIONID');  
      this.$router.push({
        name:'login'
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.page-container {
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  height: 100vh;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  .page-header {
    width: 100%;
    min-width:1400px;
    height: 70px;
    display: flex;
    align-items: center;
    background: #1e1f24;
    z-index: 10;
    padding: 0 30px;
    box-sizing: border-box;
    margin-bottom:20px;
    flex-shrink:0;
    .logo {
      font-size: 18px;
      color: #fff;
      font-weight: 700;
      margin-right: 38px;
      flex-shrink: 0;
      img {
        width: 33px;
        height: 29px;
        vertical-align: middle;
        margin-top: -5px;
      }
    }
    ul {
      flex: 1;
      display: flex;
      li {
        padding: 0 10px;
        margin-right: 20px;
        height: 70px;
        line-height: 70px;
        box-sizing: border-box;
        border-bottom: 5px solid #1e1f24;
        font-size: 14px;
        color: #8a8f99;
        cursor: pointer;
        &.active {
          color: #fff;
          border-bottom: 5px solid #cc7029;
        }
        &:hover {
          color: #fff;
        }
        .sel-down {
          z-index: 10;
        }
        .nav-sel /deep/ {
          width: 90px;
          .el-input--suffix .el-input__inner {
            width: auto;
            border: none;
            background: transparent;
            color: #8a8f99;
            padding: 0;
          }
        }
      }
    }
    .user{
      font-size:14px;
      color:#8A8F99;
      line-height:36px;
      position:relative;
      cursor:pointer;
      .el-icon-user-solid{
        width:36px;
        height:36px;
        border-radius:50%;
        background:#CC7029;
        font-size:24px;
        color:#fff;
        line-height:36px;
        text-align:center;
        overflow: hidden;
        vertical-align: middle;
        margin:-5px 5px 0 0;
      }
      &:hover{
        color:#eee;
        .el-icon-caret-bottom{
           color:#eee;
        }
      }
      .logOut{
        position:absolute;
        bottom:-56px;
        left:0;
        width: 100px;
        height: 40px;
        background: #2D3138;
        line-height:40px;
        text-align:center;
        font-size:14px;
        color:#B8BECC;
        cursor:pointer;
        &:hover{
          color:#eee
        }
      }
    }
  }
  .page-content {
    flex: 1;
    width: 1400px;
    margin: 0 auto;
  }
}
</style>
